<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance Dashboard 2025</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            color: #7f8c8d;
            font-size: 1.1em;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #3498db;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #7f8c8d;
            font-size: 1.1em;
        }
        
        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .chart-container {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 1.3em;
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 600;
        }
        
        .analysis-section {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .analysis-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 20px;
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
        }
        
        .question-block {
            margin-bottom: 25px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 4px solid #3498db;
        }
        
        .question-title {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .answer-list {
            list-style: none;
            padding-left: 0;
        }
        
        .answer-list li {
            padding: 8px 0;
            border-bottom: 1px solid #ecf0f1;
        }
        
        .answer-list li:last-child {
            border-bottom: none;
        }
        
        .rank {
            display: inline-block;
            width: 25px;
            height: 25px;
            background: #3498db;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
            margin-right: 10px;
            font-weight: bold;
        }
        
        .percentage {
            color: #27ae60;
            font-weight: bold;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .charts-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 Agentic AI Performance Dashboard 2025</h1>
            <p>基于Kaggle数据集的AI智能体表现分析看板</p>
            <p><strong>数据集记录数：80条</strong></p>
        </div>
        
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">80</div>
                <div class="stat-label">总记录数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">13</div>
                <div class="stat-label">智能体类型</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">8</div>
                <div class="stat-label">模型架构</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">9</div>
                <div class="stat-label">任务类别</div>
            </div>
        </div>
        
        <div class="charts-grid">
            <div class="chart-container">
                <div class="chart-title">智能体类型多模态支持占比</div>
                <canvas id="agentTypeChart"></canvas>
            </div>
            
            <div class="chart-container">
                <div class="chart-title">模型架构多模态支持占比</div>
                <canvas id="modelArchChart"></canvas>
            </div>
            
            <div class="chart-container">
                <div class="chart-title">任务类别公正性中位数</div>
                <canvas id="biasChart"></canvas>
            </div>
            
            <div class="chart-container">
                <div class="chart-title">智能体类型分布</div>
                <canvas id="distributionChart"></canvas>
            </div>
        </div>
        
        <div class="analysis-section">
            <div class="analysis-title">📊 核心问题分析结果</div>
            
            <div class="question-block">
                <div class="question-title">问题1：支持多模态处理的智能体类型占比排名前三</div>
                <ul class="answer-list">
                    <li><span class="rank">1</span>Document Processor <span class="percentage">50.0%</span> (2/4)</li>
                    <li><span class="rank">2</span>Research Assistant <span class="percentage">50.0%</span> (2/4)</li>
                    <li><span class="rank">3</span>Data Analyst <span class="percentage">40.0%</span> (2/5)</li>
                </ul>
            </div>
            
            <div class="question-block">
                <div class="question-title">问题2：支持多模态处理的大模型架构占比排名前三</div>
                <ul class="answer-list">
                    <li><span class="rank">1</span>CodeT5+ <span class="percentage">50.0%</span> (4/8)</li>
                    <li><span class="rank">2</span>GPT-4o <span class="percentage">33.3%</span> (2/6)</li>
                    <li><span class="rank">3</span>Transformer-XL <span class="percentage">25.0%</span> (2/8)</li>
                </ul>
            </div>
            
            <div class="question-block">
                <div class="question-title">问题3：各任务类别公正性中位数排名前三</div>
                <ul class="answer-list">
                    <li><span class="rank">1</span>Planning & Scheduling <span class="percentage">0.8349</span></li>
                    <li><span class="rank">2</span>Communication <span class="percentage">0.7816</span></li>
                    <li><span class="rank">3</span>Text Processing <span class="percentage">0.7591</span></li>
                </ul>
            </div>
        </div>
    </div>
    
    <script>
        // 智能体类型多模态支持数据
        const agentTypeData = {
            labels: ['Document Processor', 'Research Assistant', 'Data Analyst', 'Content Creator', 'Code Assistant'],
            datasets: [{
                label: '多模态支持占比 (%)',
                data: [50.0, 50.0, 40.0, 25.0, 20.0],
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB', 
                    '#FFCE56',
                    '#4BC0C0',
                    '#9966FF'
                ],
                borderWidth: 2,
                borderColor: '#fff'
            }]
        };
        
        // 模型架构多模态支持数据
        const modelArchData = {
            labels: ['CodeT5+', 'GPT-4o', 'Transformer-XL', 'Mixtral-8x7B', 'InstructGPT'],
            datasets: [{
                label: '多模态支持占比 (%)',
                data: [50.0, 33.3, 25.0, 0.0, 0.0],
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB',
                    '#FFCE56', 
                    '#4BC0C0',
                    '#9966FF'
                ],
                borderWidth: 2,
                borderColor: '#fff'
            }]
        };
        
        // 任务类别公正性数据
        const biasData = {
            labels: ['Planning & Scheduling', 'Communication', 'Text Processing', 'Creative Writing', 'Data Analysis'],
            datasets: [{
                label: '公正性中位数',
                data: [0.8349, 0.7816, 0.7591, 0.7308, 0.7298],
                backgroundColor: '#36A2EB',
                borderColor: '#2E86AB',
                borderWidth: 2
            }]
        };
        
        // 智能体类型分布数据
        const distributionData = {
            labels: ['Project Manager', 'Sales Assistant', 'Customer Service', 'Code Assistant', 'Data Analyst'],
            datasets: [{
                data: [8, 6, 5, 5, 5],
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB',
                    '#FFCE56',
                    '#4BC0C0', 
                    '#9966FF'
                ]
            }]
        };
        
        // 图表配置
        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true
                    }
                }
            }
        };
        
        // 创建图表
        const ctx1 = document.getElementById('agentTypeChart').getContext('2d');
        new Chart(ctx1, {
            type: 'doughnut',
            data: agentTypeData,
            options: {
                ...chartOptions,
                plugins: {
                    ...chartOptions.plugins,
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    }
                }
            }
        });
        
        const ctx2 = document.getElementById('modelArchChart').getContext('2d');
        new Chart(ctx2, {
            type: 'bar',
            data: modelArchData,
            options: {
                ...chartOptions,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 60,
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    }
                }
            }
        });
        
        const ctx3 = document.getElementById('biasChart').getContext('2d');
        new Chart(ctx3, {
            type: 'bar',
            data: biasData,
            options: {
                ...chartOptions,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 1.0,
                        ticks: {
                            callback: function(value) {
                                return value.toFixed(2);
                            }
                        }
                    }
                }
            }
        });
        
        const ctx4 = document.getElementById('distributionChart').getContext('2d');
        new Chart(ctx4, {
            type: 'pie',
            data: distributionData,
            options: chartOptions
        });
        
        // 设置图表容器高度
        document.querySelectorAll('canvas').forEach(canvas => {
            canvas.style.height = '300px';
        });
    </script>
</body>
</html>